<!--
 * @Description: 首页组件
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item
          v-for="item in AdvertisementList"
          :key="item.advertisement_id"
          style="display: flex;
align-items: center;justify-content: center;"
        >
          <img style="height:100%; width:100% " :src="url + item.big_pic" />
          <!-- <img style="height:460px;" :src="$targetr + item.big_pic"/> -->
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->


   <div class="main-box">
      <div class="main">
          <div class="box-hd">
            <div class="title">公告栏</div>
            <div class="textBox">
             <transition name="slide">
            <h2 class="text" :key="text.id">
            <el-tag type="warning">{{textArr[number].notice_title}}</el-tag>
            <el-tag type="">{{textArr[number].notice_context}}</el-tag>
            </h2>
      </transition>
    </div>
          </div>
          </div>
        </div>
       

    <div class="main-box">
      <div class="main">
        <!-- 手机商品展示区域 -->
        <template v-for="item in GoodsClassList" >
          <div class="phone" :key="item.class_id">
            <div class="box-hd">
              <div class="title" style="right:50px">{{ item.class_name }}</div>
            </div>
            <div class="box-bd">
              <div class="promo-list">
                <router-link to>
                  <img :src="$target + item.imgUrl" />
                </router-link>
              </div>
              <div class="list">
                <MyList :list="item.goods_list" :isMore="true"></MyList>
              </div>
            </div>
          </div>
        </template>
        <!-- 手机商品展示区域END -->

        <!-- 家电商品展示区域 -->
        <!-- <div class="appliance" id="promo-menu">
          <div class="box-hd">
            <div class="title">家电</div>
            <div class="more" id="more">
              <MyMenu :val="2" @fromChild="getChildMsg">
                <span slot="1">热门</span>
                <span slot="2">电视影音</span>
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'public/imgs/appliance/appliance-promo1.png'" />
                </li>
                <li>
                  <img :src="$target +'public/imgs/appliance/appliance-promo2.png'" />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="applianceList" :isMore="true"></MyList>
            </div>
          </div>
        </div> -->
        <!-- 家电商品展示区域END -->

        <!-- 配件商品展示区域 -->
        <!-- <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">配件</div>
            <div class="more" id="more">
              <MyMenu :val="3" @fromChild="getChildMsg2">
                <span slot="1">热门</span>
                <span slot="2">保护套</span>
                <span slot="3">充电器</span>
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'public/imgs/accessory/accessory-promo1.png'" alt />
                </li>
                <li>
                  <img :src="$target +'public/imgs/accessory/accessory-promo2.png'" alt />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="accessoryList" :isMore="true"></MyList>
            </div>
          </div>
        </div> -->
        <!-- 配件商品展示区域END -->
      </div>
    </div>
  </div>
</template>
<script>
import { selectAdvertisement, selectGoodsClassList } from "../api/home_page";

export default {
  data() {
    return {
      carousel: "", // 轮播图数据
      phoneList: "", // 手机商品列表
      miTvList: "", // 小米电视商品列表
      applianceList: "", // 家电商品列表
      applianceHotList: "", //热门家电商品列表
      accessoryList: "", //配件商品列表
      accessoryHotList: "", //热门配件商品列表
      protectingShellList: "", // 保护套商品列表
      chargerList: "", //充电器商品列表
      applianceActive: 1, // 家电当前选中的商品分类
      accessoryActive: 1, // 配件当前选中的商品分类

      AdvertisementList:[], //轮播图
      textArr: [
        {
          notice_context: "",
          notice_id: "",
          notice_title: "",
          noticeis_delete: ""
        }
      ],
      number: 0,
      GoodsClassList: [], //分类及商品

      url: "http://192.168.2.117:8080/upload/imgs/",
      // url: "http://localhost:8080/upload/imgs/",
      urllist:["f1.png","f1.png","f1.png"],

    };
  },
   computed: {
    text () {
      return {
        id: this.number,
        val: this.textArr[this.number]
      }
    }
  },
  mounted () {
    this.startMove()
  },
  watch: {
    // 家电当前选中的商品分类，响应不同的商品数据
    applianceActive: function(val) {
      // 页面初始化的时候把applianceHotList(热门家电商品列表)直接赋值给applianceList(家电商品列表)
      // 所以在切换商品列表时判断applianceHotList是否为空,为空则是第一次切换,把applianceList赋值给applianceHotList
      if (this.applianceHotList == "") {
        this.applianceHotList = this.applianceList;
      }
      if (val == 1) {
        // 1为热门商品
        this.applianceList = this.applianceHotList;
        return;
      }
      if (val == 2) {
        // 2为电视商品
        this.applianceList = this.miTvList;
        return;
      }
    },
    accessoryActive: function(val) {
      // 页面初始化的时候把accessoryHotList(热门配件商品列表)直接赋值给accessoryList(配件商品列表)
      // 所以在切换商品列表时判断accessoryHotList是否为空,为空则是第一次切换,把accessoryList赋值给accessoryHotList
      if (this.accessoryHotList == "") {
        this.accessoryHotList = this.accessoryList;
      }
      if (val == 1) {
        // 1为热门商品
        this.accessoryList = this.accessoryHotList;
        return;
      }
      if (val == 2) {
        // 2为保护套商品
        this.accessoryList = this.protectingShellList;
        return;
      }
      if (val == 3) {
        //3 为充电器商品
        this.accessoryList = this.chargerList;
        return;
      }
    },
  },
  created() {
    // 获取轮播图数据
     this.getData();
    var aaa = JSON.stringify({});
    selectAdvertisement(aaa).then((res) => {
      console.log("ddddddddddddddddddd");
      // that.Advertisementlist = res;
      for (var i = 0; i < res.length; i++) {
        this.AdvertisementList.push(res[i]);
      }
      console.log(this.AdvertisementList);
      // console.log(that.Advertisementlist[0].big_pic);
    });

    selectGoodsClassList().then((res) => {
      console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~");
for(var i = 0; i<res.length;i++){
  res[i].imgUrl= this.urllist[i]
}
      this.GoodsClassList = res;
      console.log(this.GoodsClassList);
    });

  },
  methods: {
  //公告
  startMove () {
        // eslint-disable-next-line
        let timer = setTimeout(() => {
          if (this.number === this.textArr.length-1) {
            this.number = 0;
          } else {
            this.number += 1;
          }
          this.startMove();
        }, 2500); // 滚动不需要停顿则将2000改成动画持续时间
      },
      getData() {
              var that = this;
              this.$axios
                  .post(
                      'http://localhost:8080/shop/announcement/findall',
                      {},
                      {
                          headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                      }
                  )
                  .then(function (response) {
                      console.log(response.data[0]);
                      that.textArr = response.data;
                      console.log(response);
                  })
                  .catch(function (error) {
                      console.log(error);
                  })
          },








    // 获取家电模块子组件传过来的数据
    getChildMsg(val) {
      this.applianceActive = val;
    },
    // 获取配件模块子组件传过来的数据
    getChildMsg2(val) {
      this.accessoryActive = val;
    },
    // 获取各类商品数据方法封装
    getPromo(categoryName, val, api) {
      api = api != undefined ? api : "/api/product/getPromoProduct";
      this.$axios
        .post(api, {
          categoryName,
        })
        .then((res) => {
          this[val] = res.data.Product;
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
  },
};
</script>
<style scoped>
@import "../assets/css/index.css";

 .textBox {
    width: 80%;
    height: 40px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    /* background-color:wheat; */
  }
  .text {
    width: 80%;
    position: absolute;
    bottom: 0;
  }
  .slide-enter-active, .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-enter{
    transform: translateY(20px) scale(1);
    opacity: 1;
  }
  .slide-leave-to {
    transform: translateY(-20px) scale(0.8);
    opacity: 0;
  }
  h2{
    font-size: 20px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>
